<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="300px">
    <el-form ref="priceForm" :model="formData" label-width="80px" >
      <el-form-item label="普通售价" :rules="rules" prop="normalPrice">
        <el-input-number v-model="formData.normalPrice" controls-position="right" :min="0" :precision="2"></el-input-number>
      </el-form-item>
      <el-form-item label="权益售价" :rules="rules" prop="privilegePrice">
        <el-input-number v-model="formData.privilegePrice" controls-position="right" :min="0" :precision="2"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {moviePriceEdit} from '@/api/viewing';
import {rules} from '@/utils/validate';

export default {
  data() {
    return {
      visible: false,
      playId: 0,
      title: '',
      formData: {
        id: 0,
        normalPrice: 0,
        privilegePrice: 0
      },
      rules: [
        rules.required
      ]
    }
  },
  methods: {
    show(item) {
      console.log(item)
      this.title = `【${item.siteName}】价格调整`
      this.playId = item.id;
      this.formData.id = item.id;
      this.formData.normalPrice = item.price;
      this.formData.privilegePrice = item.privilegePrice;
      this.visible = true;
    },
    confirm() {
      this.$refs.priceForm.validate(async(valid) => {
        if (!valid) {
          return;
        }
        try {
          const {data} = await moviePriceEdit(this.playId, this.formData);
          this.$emit('priceChange');
          this.$message.success('保存成功!');
          this.visible = false;
        } catch (error) {
          
        }
      })
    }
  }
} 
</script>

<style lang="scss" scoped>
.list-container{
  height: 330px;
  margin-bottom: 0;
  overflow: auto;

  .brand-item{
    width: 90%;
    margin: 10px auto;
    text-align: center;
    border: 1px solid #d9d9d9;

    &.selected,
    &:hover{
      border-color: #409EFF;
    }
  }
  
  .brand-poster{
    width: 80px;
    height: 80px;
    margin: 20px auto 10px;
  }
}
</style>